<template>
    <div class="dropDown hover">
        <div @click="isShow = !isShow" :style="{ 'min-width': props.width }" class="valBox flex-c-s">
            {{ selectCont }}
        </div>
        <div v-if="type == 'list'" v-show="isShow" :style="{ 'width': props.listWidth, 'max-height': props.listHeight }"
            class="dropDownList">
            <div v-for="(item, index) in props.list" :key="index" @click="onPart(item, index)"
                :class="selectIndex == index ? 'active' : ''" class="dropDownList-part  flex-c-s hover">
                {{ item[props.labelName] }}
            </div>
        </div>
        <div v-else v-show="isShow" class="dropDownList">
            <el-tree accordion style="max-width: 10rem" :data="list" :props="defaultProps"
                @node-click="handleNodeClick" />
        </div>
    </div>
</template>


<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
    type: {
        type: String,
        default: 'list'
    },
    labelName: {
        type: String,
        default: 'content'
    },
    width: {
        type: String,
        default: '2.01rem'
    },
    listWidth: {
        type: String,
        default: '7.14rem'
    },
    listHeight: {
        type: String,
        default: '5rem'
    },
    defaultCont: {
        type: String,
        default: ''
    },
    list: {
        type: Array,
        default: []
    }
})
const selectCont = ref('')
onMounted(() => {
    selectCont.value = props.defaultCont
})
const isShow = ref(false)
const selectIndex = ref(-1)
const emits = defineEmits([['select']])
const onPart = (item, index) => {
    selectIndex.value = index
    isShow.value = false
    emits('select', index)
    selectCont.value = item[props.labelName]
}
const handleNodeClick = (data) => {
    if (data[defaultProps.children] == undefined) {
        
        selectCont.value = data.cateName
        emits('select', data)
        isShow.value = !isShow.value
    }
}

const data = [
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 2',
        children: [
            {
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1',
                    },
                ],
            },
            {
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1',
                    },
                ],
            },
        ],
    },
    {
        label: 'Level one 3',
        children: [
            {
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1',
                    },
                ],
            },
            {
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1',
                    },
                ],
            },
        ],
    },
]

const defaultProps = {
    children: 'subList',
    label: 'cateName',
}
defineExpose({
    onPart
})
</script>

<style lang="less" scoped>
.dropDown {
    position: relative;
    z-index: 99;

    :deep(.el-tree-node__content) {
        padding-right: 0.3rem !important;
    }

    .valBox {
        position: relative;
        height: 0.4rem;
        border-radius: 0.04rem;
        background: #4180F7;
        color: #FFF;
        font-family: "PingFang SC";
        font-size: 0.16rem;
        font-weight: 400;
        padding-left: 0.18rem;
        padding-right: 0.26rem;
        box-sizing: border-box;
    }

    .valBox:before {
        position: absolute;
        right: 0.1165rem;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 0;
        height: 0;
        border-top: 0.0664rem solid transparent;
        border-right: 0.0664rem solid transparent;
        border-left: 0.0664rem solid transparent;
        border-top: 0.0664rem solid #fff;
    }

    .dropDownList {
        position: absolute;
        top: 0.52rem;
        left: 0;
        border-radius: 0.04rem;
        border: 0.01rem solid #F4F5F9;
        background: #FFF;
        box-shadow: 0px 0.04rem 0.18rem 0px rgba(20, 29, 75, 0.12);

        &-part {
            height: 0.48rem;
            width: 100%;
            color: #1C1C1C;
            font-family: "PingFang SC";
            font-size: 0.16rem;
            font-weight: 400;
            padding-left: 0.25rem;
            padding-right: 0.49rem;
            box-sizing: border-box;
        }

        .active {
            color: #4180F7;
        }
    }

    .dropDownList-part:hover {
        border-radius: 0px 0px 0.04rem 0.04rem;
        background: #4180F7;
        color: #FFF;
    }
}
</style>